<template>
    <div class="footer">
        {{word}}
    </div>
</template>

<script>
    export default {
        name: 'Footer',
        data() {
            return {
                word: '',
                wordList: [
                    '学习如逆水行舟，不进则退。读书励志，方能乘风破浪，勇往直前。',
                    '书籍是智慧的钥匙，读书是向上的翅膀，让我们迎风飞翔。',
                    '心中有阳光，脚下有力量。读书是通往梦想的捷径。',
                    '书中自有颜如玉，书中自有黄金屋。励志读书，改变命运。',
                    '读书如掘井，励志之言，如清泉，涌流不息。',
                    '读万卷书，行万里路，让知识的力量引领我们不断前行。',
                    '读一书，增一智，励志前行，书山有路勤为径。',
                ],
            }
        },
        methods: {
            getWord() {
                this.word = this.wordList[Math.floor(Math.random() * this.wordList.length)];
            },
        },
        watch: {
            $route() {
                this.getWord();
            }
        },
    }
</script>

<style scoped>
    .footer {
        text-align: center;
        line-height: 20px;  /* 调整行高使文字垂直居中 */
        font-size: 12px;    /* 适当增大字体 */
        font-weight: bold;  /* 添加加粗效果 */
        background-color: #007BFF;
        height: 20px;
        color: #fff;
        position: fixed;    /* 固定在底部 */
        bottom: 0;
        left: 0;
        right: 0;
    }
</style>